<template>
  <el-card shadow="never" class="mb-3">
    <div class="h-[90px] flex flex-col justify-between">
      <div class="flex flex-row items-center justify-between">
        <div class="flex items-center">
          <div class="w-[18px] h-[13px] mr-1 bg-[url(/src/assets/images/card-title-prefix.png)] bg-no-repeat bg-center bg-[length:100%_100%]"></div>
          <div class="text-[14px]">
            <slot name="title"></slot>
          </div>
        </div>
        <div v-if="showOptions">
          <slot name="options"></slot>
        </div>
      </div>
      <div class="flex items-center justify-between w-full h-[50px]">
        <div class="info-container">
          <div class="info-title"><slot name="first-title"></slot></div>
          <div class="info-num"><slot name="first-num"></slot></div>
        </div>
        <div class="divider" />
        <div class="info-container">
          <div class="info-title"><slot name="second-title"></slot></div>
          <div class="info-num"><slot name="second-num"></slot></div>
        </div>
        <div class="divider" />
        <div class="info-container">
          <div class="info-title"><slot name="third-title"></slot></div>
          <div class="info-num"><slot name="third-num"></slot></div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
defineProps({
  showOptions: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped lang="scss">
.divider {
  padding: 10px 0;
  width: 1px;
  height: 80%;
  background-color: #aaaaaa;
}
.info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 33%;
  height: 100%;
  .info-title {
    font-size: 14px;
  }
  .info-num {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1px;
  }
}
</style>
